<template>
  <div class="pay">
    <span class="title">请选择支付方式</span>
    <div class="radio">
      <van-radio-group v-model="radio">
        <van-radio name="1" checked-color="red" class="rad1">
          <img src="./images/zhifubao.png" class="img1" />
          <p class="text">支付宝</p>
        </van-radio>
        <van-radio name="2" checked-color="red" class="rad">
          <img src="./images/weixin.png" class="img2" />
          <p class="text">微信</p>
        </van-radio>
      </van-radio-group>
    </div>
    <van-button type="danger" class="button" @click="Dialog">确定</van-button>
    <van-dialog v-model="show" title="请扫码支付" show-cancel-button confirmButtonText="已完成支付" cancelButtonText="取消支付" @confirm="confirm" @cancel="cancel">
      <img src="./images/zfbpay.jpg" v-if="radio == '1'" style="width: 100%; height: 400px" />
      <img src="./images/wxpay.jpg" v-else style="width: 100%; height: 400px" />
    </van-dialog>
  </div>
</template>
<script>
import Vue from "vue";
import { RadioGroup, Radio, Button } from "vant";
import { Dialog } from "vant";
import { Notify } from "vant";
Vue.use(Button);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Dialog);
export default {
  name: "pay",
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      radio: "1",
      show: false,
    };
  },
  methods: {
    Dialog() {
      this.show = true;
    },
    confirm() {
      Dialog.confirm({
        message: "支付完成，是否跳转到个人中心？",
      })
        .then(() => {
          this.$router.push("./center");
        })
        .catch(() => {});
    },
    cancel() {
      Notify({
        message: "支付失败",
        color: "#fff",
        background: "#ee0a24",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.pay {
  width: 100%;
  height: 100vh;
  background-color: #f4f4f4;

  .title {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 90px;
    color: rgb(183, 167, 167);
    display: flex;
    text-align: center;
    font-size: 14px;
  }

  .radio {
    width: 100%;
    height: 140px;
    background-color: #ffffff;

    .rad1 {
      display: flex;
      border-bottom: 1px solid #aaa;
      margin-top: 40px;
      padding-top: 10px;
      padding-left: 10px;
    }

    .rad {
      display: flex;
      border-bottom: 1px solid #aaa;
      margin-top: 10px;
      padding-left: 10px;
    }

    .img1 {
      width: 40px;
      height: 30px;
      position: fixed;
      top: 95px;
      left: 40px;
    }

    .img2 {
      width: 25px;
      height: 25px;
      position: fixed;
      top: 165px;
      left: 46px;
    }

    .text {
      font-size: 0.37333rem;
      font-weight: 700;
      text-align: center;
      height: 30px;
      line-height: 30px;
      margin-left: 40px;
    }
  }

  .button {
    position: fixed;
    width: 100%;
    bottom: 50px;
  }
}
</style>
